<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <title><ui:insert name="title">Compras ONLINE</ui:insert></title>
        <h:outputStylesheet library="css" name="jsfcrud.css"/>
        <h:outputScript library="js" name="jsfcrud.js"/>
    </h:head>

    <h:body>

        <p:growl id="growl" life="3000" />

                    <h:form id="form">
                        <p:carousel value="#{productoController.cars}" headerText="Advanced" var="car" itemStyleClass="carItem" numVisible="1" easing="easeOutBounce" styleClass="carouselAdvanced">
                            <p:panelGrid columns="2" style="width:100%" columnClasses="label,value">
                                <f:facet name="header">
                                    <p:graphicImage name="resources/images/icons/follow_icon2.png"/> 
                                </f:facet>

                                <h:outputText value="Id:" />
                                <h:outputText value="#{car.id}" />

                                <h:outputText value="Year" />
                                <h:outputText value="#{car.nombre}" />

                                <h:outputText value="Disponible" />
                                <h:outputText value="#{car.disponibles}" />

                                <h:outputText value="Price" />
                                <h:outputText value="$#{car.price}" />

                                <f:facet name="footer">
                                    <p:commandButton update=":form:carDetail" oncomplete="PF('carDialog').show()" icon="ui-icon-search">
                                        <f:setPropertyActionListener value="#{car}" target="#{productoController.selectedCar}" />
                                    </p:commandButton>
                                </f:facet>
                            </p:panelGrid>
                        </p:carousel> 

                        <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                            <p:outputPanel id="carDetail" style="text-align:center;">
                                <p:panelGrid  columns="2" rendered="#{not empty productoController.selectedCar}" columnClasses="label,value">
                                    <f:facet name="header">
                                        <p:graphicImage name="resources/images/icons/follow_icon4.png"/> 
                                    </f:facet>

                                    <h:outputText value="Id:" />
                                    <h:outputText value="#{productoController.selectedCar.id}" />

                                    <h:outputText value="Nombre" />
                                    <h:outputText value="#{productoController.selectedCar.nombre}" />

                                    <h:outputText value="Disponible:" />
                                    <h:outputText value="#{productoController.selectedCar.disponibles}"/>

                                    <h:outputText value="Price" />
                                    <h:outputText value="$#{productoController.selectedCar.price}" />
                                </p:panelGrid>
                            </p:outputPanel>
                        </p:dialog>
                    </h:form>

    </h:body>

</html>
